<!DOCTYPE html>
<meta name="color-scheme" content="light dark">
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<body>

<!-- no style for reference -->
<ul>
  <li>Button: <button>button</button></li>
  <li>Type button: <input type="button" value="button"/></li>
  <li>Type submit: <input type="submit" /></li>
  <li>Type reset: <input type="reset" /></li>
  <li>Type file: <input type="file" /></li>
</ul>

<!-- disabled -->
<input type="button" disabled value="button"> <br>

<!-- border -->
<input type="button" style="border: 3px solid lime;" value="button">
<input type="button" style="border-radius: 6px;" value="button"> <br>

<!-- background -->
<input type="button" style="background: linear-gradient(to bottom, #dea 0%,#9c7 44%,#494 100%);" value="button"> <br>

<!-- shadow -->
<input type="button" style="box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4px 4px rgba(0,255,0,0.5);" value="button"> <br>

<!-- size -->
<input type="button" style="width: 2px; height: 2px; padding: 0;" value="button">
<input type="button" style="width: 8px; height: 8px;" value="button">
<input type="button" style="width: 16px; height: 16px;" value="button">
<input type="button" style="width: 24px; height: 24px;" value="button">
<input type="button" style="width: 26px; height: 20px;" value="button">
<input type="button" style="width: 60px; height: 60px;" value="button"> <br>

<!-- zoom -->
<input type="button" style="zoom: 1.5;" value="button">
<input type="button" style="zoom: 3;" value="button">

<!-- webkit-appearance -->
<div style="-webkit-appearance: button; width: 50px; height: 30px;">button</div>

</body>
